<template>
	<div id="">
		<ul class="tabUl">
			<li v-for="(items,index) in tabMain" :key="items.key"
			@click="setActive(index)"
			:class="{'active':idx==index}">
				<span>{{items.text}}</span>
				<img src="@/assets/images/down@2x.png" width="12%">
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name:'',
	props: ['tabMain'],
	data:() => ({
		idx:'',
	}),
	methods: {
	  setActive(index) {
	    this.idx = index;
			this.$emit('setTabidx',index);
	  }
	},
	mounted() {
	  //do something after mounting vue instance
		// console.log(this.$refs.list);

	}
}
</script>

<style lang="scss" scoped>

	.tabUl{
		@include flex;
		li{
			@include flexcell;
			text-align: center;
			line-height: 30px;
			white-space: nowrap;
			// overflow: hidden;
			// text-overflow: ellipsis;
			@include flex;
			span{
				width: 68px;
				overflow: hidden;
			}
			&.active{
				color: $greenColor;
			}
		}
	}
</style>
